<div class="content">
  <table width="700px">
    <tr>
      <td width="640px"><textarea id="tweetArea" rows="4" cols="60" style="width:100%">Query</textarea></td>
      <td width="60px" style="text-align:center;"><a href="#" onclick="tweetOperation(this);">Create</a></td>
    </tr>
  </table>

  <table width="700px">
    <tr>
      <th>BLR</th>
      <th>USD</th>
      <th>EUR</th>
      <th>Comment</th>
      <th>Wallet</th>
      <th>Date</th>

      <th></th>
    </tr>

    <% @operations.each do |operation| %>
        <%= render :partial => 'index_operation_fields', :locals => {:operation => operation} %>
    <% end %>

    <tr class="template">
      <form action="" method="post">
        <td width="70px"><input type="text" class="field money" name="op[value][BLR]"/></td>
        <td width="70px"><input type="text" class="field money" name="op[value][USD]"/></td>
        <td width="70px"><input type="text" class="field money" name="op[value][EUR]"/></td>

        <td><input type="text" class="field comment" name="op[comment]" /></td>
        <td><%= collection_select :op, :wallet, current_user.wallets, :id, :name, {}, {:class => "field", :style => "width='70px'"} %></td>
        <td width="70px"><input type="text" class="field" name="op[date]"/></td>

        <td width="60px" style="text-align:center;">
          <input type="hidden" class="field" name="authenticity_token" value="<%= form_authenticity_token %>"/>
          <a href="#" onclick="addOperation(this);">Create</a>
        </td>
      </form>
    </tr>
  </table>
</div>

<script type="text/javascript">

    function delOperation(link, id) {
        $.ajax({
            type: "POST",
            url: "<%= url_for :action => 'del_operation', :controller => 'twee' %>",
            data: {id: id},
            dataType: "text",
            success: function(text) {
                if (text != "OK") {
                    alert("Aaaaa!!!...")
                } else {
                    $(link).parents("tr:first").remove()
                }
            }
        });
    }

    function tweetOperation(link) {
        $.ajax({
            type: "POST",
            url: "<%= url_for :action => 'tweet_operation', :controller => 'twee' %>",
            data: {tweet: $("#tweetArea").val()},
            dataType: "html",

            success: function(addedOperation) {
                $(".template").before(addedOperation);
            }
        });

    }

    function collectOperationData(fieldContainer) {
        var data = {};
        fieldContainer.find(".field").each(function (index, field) {
            data[field.name] = $(field).val()
        });

        return data;
    }

    function addOperation(link) {
        $.ajax({
            type: "POST",
            url: "<%= url_for :action => 'add_operation', :controller => 'twee' %>",
            data: collectOperationData($(".template")),
            dataType: "html",
            success: function(addedOperation) {
                $(".template").before(addedOperation);
            }
        });

        return false;
    }

    function updateOperation(link, id) {
        var tr = $(link).parents("tr:first");

        var data = collectOperationData(tr);
        data["id"] = id;

        $.ajax({
            type: "POST",
            url: "<%= url_for :action => 'update_operation', :controller => 'twee' %>",
            data: data,
            dataType: "html",
            success: function(addedOperation) {
                tr.replaceWith(addedOperation);
            }
        });

        return false;
    }

</script>
